<html>
<head>
	<script src="jquery-2.1.0.min.js"></script>
	<link rel="stylesheet" href="styles.css" type="text/css"></link>
	<script type="text/javascript">
	
	var instructionFileRead = "test.txt";
	
	function setupUI()
	{
		$("#messageFormResponse").hide();
		
		$("#debugInfoToggle").click(function()
		{
			$("#messageFormResponse").slideToggle();
		});
		
		generateInstructions();
		
	}
	
	function generateInstructions()
	{
		var asyncInstructionBuilder = $.ajax(
		{
			url:"readfile.php",
			type:"GET",
			complete: function(data,textStatus) { instructionCallback(data,textStatus);	},
		});
	}
	
	function instructionCallback(data,textStatus)
	{
		document.getElementById("instructions").innerHTML = data.responseText;
	}
	
	function chatAjax()
	{
		var inputObject = new Object();
		
		inputObject.actionId = document.getElementById("actionId").value;
		inputObject.messageSender = document.getElementById("messageSender").value;
		inputObject.messageRecipient = document.getElementById("messageRecipient").value;
		inputObject.messageText = document.getElementById("messageText").value;
		inputObject.userPass = document.getElementById("userPassword").value;
		inputObject.debugMode = 1;
		
		var inputObjectString = JSON.stringify(inputObject);
		var encodedObjectString = "inputObject="  + encodeURIComponent(inputObjectString);
		document.getElementById("messageFormResponse").innerHTML = "Decoded: " + inputObjectString + "<br/>Encoded: " + encodedObjectString + "<br/><br/>";
		
		var asyncAjax = $.ajax(
		{
			url:"chat.php",
			type:"POST",
			data: encodedObjectString,
			complete: function (data,textStatus) {ajaxCallback(data,textStatus);},
		});
	}
	
	function ajaxCallback(data,textStatus)
	{
		console.log(data.responseText);
		try
		{	
			var returnedObject = JSON.parse(data.responseText);
			document.getElementById("messageFormResponse").innerHTML += returnedObject.toSource();
			document.getElementById("exitResponse").innerHTML = "<br/><br/>";
			if(returnedObject.returnData != null)
			{
				document.getElementById("exitResponse").innerHTML += returnedObject.returnData;
			}
			document.getElementById("exitResponse").innerHTML += "<br/><b>Exit Code: " + returnedObject.exitCode + "<br/>Exit Text: " + returnedObject.exitText + "</b>";
		}
		catch(exception)
		{
			document.getElementById("messageFormResponse").innerHTML += "Error: " + exception + "<br/>Script Output: " + data.responseText;
			document.getElementById("messageFormResponse").innerHTML += "<br/><br/>Table:<br/><br/>";
			document.getElementById("messageFormResponse").innerHTML += returnedObject.returnData;
		}
	}
	</script>
</head>

<body onload="setupUI();">
	<div>
		<table>
			<tr>
				<td>
					Action ID:
				</td>
				<td>
					<input id="actionId" type="text"></input>
				</td>
			</tr>
			<tr>
				<td>
					Sender:
				</td>
				<td>
					<input id="messageSender" type="text"></input>
				</td>
			</tr>
			<tr>
				<td>
					Recipient:
				</td>
				<td>
					<input id="messageRecipient" type="text"></input>
				</td>
			</tr>
			<tr>
				<td>
					Text:
				</td>
				<td>
					<input id="messageText" type="text"></input>
				</td>
			</tr>
			<tr>
				<td>
					User Password:
				</td>
				<td>
					<input type="text" id="userPassword"></input>
				</td>
			</tr>
			<tr>
				<td>
					<input id="messageSubmit" type="button" onclick="chatAjax()" value="Submit"></input>
				</td>
				<td>
				</td>
			</tr>
		</table>
		<br/>
		<br/>
		<input id="debugInfoToggle" value="Toggle Debug Info" type="button"/>
		<div id="messageFormResponse">
		</div>
		<div id="exitResponse">
		</div>
	</div>
	<div id="instructions">
	</div>
</body>

</html>